<script>
    import { addRequest, updateRequest } from '@/api/measuringType'
    import { findEnergySelect } from '@/api/common'

    export default {
        name: 'FormModal',
        // mixins: [cascaded],

        props: {
            title: String,
            rowData: Object,
        },
        data() {
            return {
                formData: {
                    name: this.$props.rowData?.name || null,
                    energyType: this.$props.rowData?.energyType || null,
                },
                rules: {
                    name: [{ required: true, message: '请输入计量器具名称', trigger: 'blur' }],
                    // energyType: [{ required: true, message: '请输入能源类型', trigger: 'blur' }],
                },
                energyTypeOptions: [],
                disabled: false,
                // deviceTypeList: [],
            }
        },
        created() {
            this.initSetModal()
            // 能源类型
            findEnergySelect(this.$store.state.projectId).then((result) => {
                this.energyTypeOptions = result.data || []
            })
            if (this.$props.rowData) {
                this.disabled = true
            }
        },
        methods: {
            initSetModal() {
                if (this.$props.rowData) {
                    this.$emit('SetTitle', '编辑')
                } else {
                    this.$emit('SetTitle', '新增')
                }
                // this.$emit('SetPageWidth', 600)
                this.$emit('SetPageActions', [
                    {
                        text: '保存',
                        theme: 'primary',
                        handle: () => {
                            this.submitForm()
                        },
                        loading: false,
                    },
                    {
                        text: '取消',
                        theme: 'default',
                        handle: () => {
                            this.$emit('Close')
                        },
                    },
                ])
            },
            submitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        //验证成功,发送请求
                        if (this.$props.rowData) {
                            //编辑更新
                            this.sendUpdateRequestFun()
                        } else {
                            //新增
                            this.sendAddRequestFun()
                        }
                    } else {
                        //验证失败
                    }
                })
            },
            /**
             * @name: 新增请求
             * @test: test font
             * @msg:
             * @return {*}
             */

            sendAddRequestFun() {
                addRequest({
                    ...this.formData,
                }).then((result) => {
                    if (result.code == 200) {
                        this.$message.success(result.msg)
                        this.$emit('Close', true)
                    }
                })
            },
            /**
             * @name: 编辑更新请求
             * @test: test font
             * @msg:
             * @return {*}
             */

            sendUpdateRequestFun() {
                const params = {
                    ...this.formData,
                    id: this.$props.rowData?.id,
                }
                updateRequest(params).then((result) => {
                    if (result.code == 200) {
                        this.$message.success(result.msg)
                        this.$emit('Close', true)
                    }
                })
            },
        },
    }
</script>
<template>
    <el-form label-position="top" :model="formData" :rules="rules" ref="ruleForm">
        <el-row :gutter="24">
            <el-col :span="24">
                <el-form-item label="计量器具类型名称" prop="name">
                    <el-input placeholder="请输入" v-model="formData.name" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="能源类型" prop="energyType">
                    <el-select
                        v-model="formData.energyType"
                        clearable
                        filterable
                        placeholder="请选择类型"
                        transfer
                        style="width: 100%"
                        :disabled="disabled"
                    >
                        <el-option
                            v-for="item in energyTypeOptions"
                            :key="item.code"
                            :label="item.name"
                            :value="item.code"
                        >
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
